<template>
    <div class="cart">
        <div class="cart-container">
            <van-empty v-show="goodsList.length == 0" description="购物车目前还没
   有商品" :image="cartEmptyImage">
                <router-link :to="{ name: 'category' }">
                    <van-button round type="danger" class="bottom-button">去购物</van-button>
                </router-link>
            </van-empty>
            <!-- 购物车列表 -->
            <div v-for="item in goodsList" :key="item.id" class="list">
                <van-swipe-cell>
                    <!-- 复选框 -->
                    <div class="checkbox">
                        <van-checkbox :name="item" v-model="item.cart.checked"@change="onCheck" checked-color="#f11a27"></van-checkbox>
                    </div>
                    <!-- 商品图片 -->
                    <div class="image">
                        <router-link :to="{
                            name: 'goodsDetail', params: {
                                id: item.id
                            }
                        }">
                            <van-image width="50" height="50" :src="item.picture" />
                        </router-link>
                    </div>
                    <!-- 商品信息 -->
                    <div class="goods-info">
                        <div>{{ item.name }}</div>
                        <div class="bottom">
                            <div class="price"><span>￥</span>{{ item.price }}</div>
                            <van-stepper v-model="item.cart.num" theme="round" button-size="22" disable-input />
                        </div>
                    </div>
                    <!-- 左滑删除 -->
                    <template #right>
                        <van-button aquare icon="delete" type="danger" class="delete-button"@click="onDelete(item)" />
                    </template>
                </van-swipe-cell>
            </div>
            <!-- 结算 -->
             <van-submit-bar v-show="goodsList.length" :price="total * 100" button-text="去结算" button-type="primary" @submit="onSubmit" class="settlement">
 <van-checkbox v-model="allChecked" checked-color="#f11a27" @click="onCheckAll">全选</van-checkbox>
 </van-submit-bar>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { getCartList } from '../api'
import useCart from '../stores/cart'
import cartEmptyImage from '../assets/images/cart_empty.png'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'
const router = useRouter()
const { cart, removeCart } = useCart()
const goodsList = ref([])
const allChecked = ref(false)
onMounted(async() => {
    await  loadCart()
    onCheck()
    console.log(goodsList)
})
// 加载购物车数据
const loadCart = async () => {
    const ids = cart.map(item => item.id)
    goodsList.value = await getCartList({ ids: ids.join(',') })
    goodsList.value.forEach(goods => {
        goods.cart = cart.find(item => goods.id == item.id)
    })
}
// 删除商品
const onDelete = item => {
 const id = item.id
 goodsList.value.forEach((item, index) => {
 if (item.id == id) {
 goodsList.value.splice(index, 1)
 }
 })
 removeCart(id)
}
// 总金额
const total = computed(() => {
 let sum = 0
 goodsList.value.forEach(item => {
 if (item.cart.checked) {
 sum += item.price * item.cart.num
 }
 })
 return sum
})
// 全选
const onCheckAll = () => {
 goodsList.value.forEach(el => {
 el.cart.checked = allChecked.value
 })
}
// 去结算
const onSubmit = () => {
  // 收集选中的商品
  const selectedGoods = goodsList.value
    .filter(item => item.cart.checked)
    .map(item => ({
      id: item.id,
      name: item.name,
      price: item.price,
      picture: item.picture,
      num: item.cart.num // 确保包含数量
    }));

  if (selectedGoods.length === 0) {
    showToast('请选择至少一件商品');
    return;
  }

  // 将选中的商品信息作为查询参数传递
  router.push({
    name: 'order',
    query: { goods: JSON.stringify(selectedGoods) }
  });
};
// 商品都被选中时，全选按钮高亮
const onCheck = () => {
 allChecked.value = goodsList.value.every(el => el.cart.checked)
}
</script>
<style lang="less" scoped>
.cart {
    margin: 0.3rem;
    padding: .05rem 0 3rem 0;

    .cart-container {
        margin-top: 1rem;

        .list {
            position: relative;
            height: 5rem;
            border-radius: 10px;
            box-shadow: 0px 0px 5px #ccc;
            margin-bottom: 1rem;

            .checkbox {
                position: absolute;
                top: 1.7rem;
                left: .2rem;
            }

            .image {
                position: absolute;
                top: .7rem;
                left: 2rem;
            }

            .goods-info {
                height: 5rem;
                display: flex;
                justify-content: space-around;
                flex-direction: column;
                padding: 0 1rem 0 6rem;

                .bottom {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .price {
                        color: #c82519;
                        font-size: .45rem;
                    }
                }
            }

            .delete-button {
                width: 2rem;
                height: 100%;
            }
        }

        .bottom-button {
            width: 7rem;
            height: 2rem;
        }
    }

    .settlement {
        margin-bottom: -0.1rem;
    }
}

:deep(.van-submit-bar) {
    bottom: 3.5rem;
}

:deep(.van-swipe-cell) {
    width: 100%;
}
</style>